<template>
  <vxe-colgroup v-if="tableColumn.isGroup" :title="tableColumn.showName">
    <template v-for="subColumn in tableColumn.children" :key="subColumn.columnId">
      <OnlineCustomTableColumnGroup
        v-if="subColumn.isGroup"
        :key="subColumn.columnId + '__group'"
        :tableColumn="subColumn"
        :getActionUrl="getActionUrl"
        :getUploadData="getUploadData"
        :getUploadLimit="getUploadLimit"
        :parseInlineUploadData="parseInlineUploadData"
        :loadTableColummnDropdownData="loadTableColummnDropdownData"
        :onTableDropdownChange="onTableDropdownChange"
        :filterMethod="filterMethod"
        :firstColumnField="firstColumnField"
        :primaryColumnName="primaryColumnName"
        :table="table"
        :inlineEditConfig="inlineEditConfig"
      />
      <template v-else>
        <template v-if="subColumn.inlineEdit">
          <!-- Input组件 -->
          <table-box-inline-input-column
            v-if="subColumn.inlineEditWidgetType === SysCustomWidgetType.INLINE_INPUT"
            :ref="subColumn.columnId"
            :title="subColumn.showName"
            :width="subColumn.columnWidth"
            :field="subColumn.editFieldName"
            :sortable="subColumn.sortable"
            :filters="
              subColumn.filterable ? tableColumnFilterList[subColumn.showFieldName] : undefined
            "
            :filter-method="filterMethod"
            :visible="subColumn.show"
            :fixed="subColumn.fixed === 'none' ? undefined : subColumn.fixed"
            :row-group-node="firstColumnField === subColumn.showFieldName"
            :disabled="onInlineColumnDisabled(subColumn)"
            @change="(val, row) => onInlineColumnValueChange(val, row, subColumn)"
          />
          <!-- 数字输入组件 -->
          <table-box-inline-number-column
            v-if="subColumn.inlineEditWidgetType === SysCustomWidgetType.INLINE_NUMBER_INPUT"
            :ref="subColumn.columnId"
            :title="subColumn.showName"
            :width="subColumn.columnWidth"
            :field="subColumn.editFieldName"
            :sortable="subColumn.sortable"
            :filters="
              subColumn.filterable ? tableColumnFilterList[subColumn.showFieldName] : undefined
            "
            :filter-method="filterMethod"
            :visible="subColumn.show"
            :fixed="subColumn.fixed === 'none' ? undefined : subColumn.fixed"
            :row-group-node="firstColumnField === subColumn.showFieldName"
            :disabled="onInlineColumnDisabled(subColumn)"
            @change="(val, row) => onInlineColumnValueChange(val, row, subColumn)"
          />
          <!-- 日期选择组件 -->
          <table-box-inline-date-column
            v-if="subColumn.inlineEditWidgetType === SysCustomWidgetType.INLINE_DATE"
            :ref="subColumn.columnId"
            :title="subColumn.showName"
            :width="subColumn.columnWidth"
            :field="subColumn.editFieldName"
            :sortable="subColumn.sortable"
            :filters="
              subColumn.filterable ? tableColumnFilterList[subColumn.showFieldName] : undefined
            "
            :filter-method="filterMethod"
            :visible="subColumn.show"
            :fixed="subColumn.fixed === 'none' ? undefined : subColumn.fixed"
            :row-group-node="firstColumnField === subColumn.showFieldName"
            :disabled="onInlineColumnDisabled(subColumn)"
            @change="(val, row) => onInlineColumnValueChange(val, row, subColumn)"
          />
          <!-- 开关组件 -->
          <table-box-inline-switch-column
            v-if="subColumn.inlineEditWidgetType === SysCustomWidgetType.INLINE_SWITCH"
            :ref="subColumn.columnId"
            :title="subColumn.showName"
            :width="subColumn.columnWidth"
            :field="subColumn.editFieldName"
            :sortable="subColumn.sortable"
            :filters="
              subColumn.filterable ? tableColumnFilterList[subColumn.showFieldName] : undefined
            "
            :filter-method="filterMethod"
            :visible="subColumn.show"
            :fixed="subColumn.fixed === 'none' ? undefined : subColumn.fixed"
            :row-group-node="firstColumnField === subColumn.showFieldName"
            :disabled="onInlineColumnDisabled(subColumn)"
            @change="(val, row) => onInlineColumnValueChange(val, row, subColumn)"
          >
            <template #default="{ row }">
              <span v-if="row.isAggregate && row.groupField != null">
                {{ getObjectValue(row, subColumn.showFieldName, firstColumnField) }}
              </span>
              <el-tag
                v-else
                :size="layoutStore.defaultFormItemSize"
                :type="getObjectValue(row, subColumn.showFieldName) ? 'success' : 'danger'"
              >
                {{ getObjectValue(row, subColumn.showFieldName) ? '是' : '否' }}
              </el-tag>
            </template>
          </table-box-inline-switch-column>
          <!-- 上传组件 -->
          <table-box-inline-upload-column
            v-if="subColumn.inlineEditWidgetType === SysCustomWidgetType.INLINE_UPLOAD"
            :ref="subColumn.columnId"
            :title="subColumn.showName"
            :width="subColumn.columnWidth"
            :field="subColumn.showFieldName"
            :type="
              subColumn.column && subColumn.column.fieldKind === SysOnlineFieldKind.UPLOAD_IMAGE
                ? 'image'
                : 'file'
            "
            :action="getActionUrl(subColumn)"
            :data="getUploadData(subColumn)"
            :limit="getUploadLimit(subColumn)"
            :rowKey="widget.primaryColumnName"
            :parseUploadDataFunction="(val, row) => parseInlineUploadData(subColumn, row, val)"
            fileListType="dropdown"
            :visible="subColumn.show"
            :fixed="subColumn.fixed === 'none' ? undefined : subColumn.fixed"
            :row-group-node="firstColumnField === subColumn.showFieldName"
            :disabled="onInlineColumnDisabled(subColumn)"
            @change="(val, row) => onInlineColumnValueChange(val, row, subColumn)"
          >
            <template #default="{ row }">
              <span v-if="row.isAggregate && row.groupField != null">
                {{ getObjectValue(row, subColumn.showFieldName, firstColumnField) }}
              </span>
              <upload-file-list
                v-else
                :file-list="parseTableUploadData(subColumn, row)"
                :type="
                  subColumn.column.fieldKind === SysOnlineFieldKind.UPLOAD_IMAGE ? 'card' : 'text'
                "
                direction="horizontal"
                :readonly="true"
              />
            </template>
          </table-box-inline-upload-column>
          <!-- Select组件 -->
          <table-box-inline-select-column
            v-if="subColumn.inlineEditWidgetType === SysCustomWidgetType.INLINE_SELECT"
            :ref="subColumn.columnId"
            :title="subColumn.showName"
            :width="subColumn.columnWidth"
            :field="subColumn.editFieldName"
            :sortable="subColumn.sortable"
            :multiple="
              subColumn.column && subColumn.column.fieldKind === SysOnlineFieldKind.MULTI_SELECT
            "
            :filters="subColumn.filterable ? subColumn[subColumn.showFieldName] : undefined"
            :filter-method="filterMethod"
            :loadDropdownData="row => loadTableColummnDropdownData(row, subColumn)"
            :visible="subColumn.show"
            :fixed="subColumn.fixed === 'none' ? undefined : subColumn.fixed"
            :row-group-node="firstColumnField === subColumn.showFieldName"
            :disabled="onInlineColumnDisabled(subColumn)"
            @change="(val, row) => onTableDropdownChange(val, row, subColumn)"
          >
            <template #default="{ row }">
              <span v-if="row.isAggregate && row.groupField != null">
                {{ getObjectValue(row, subColumn.showFieldName, firstColumnField) }}
              </span>
              <span
                v-else-if="subColumn.fieldShowType === 0 || subColumn.fieldShowType == null"
                :class="{ 'cell-click': subColumn.supportCellClick }"
              >
                {{ getObjectValue(row, subColumn.showFieldName) }}
              </span>
              <el-tag
                v-else
                :size="layoutStore.defaultFormItemSize"
                :type="getCellTagType(subColumn, row)"
              >
                {{ getObjectValue(row, subColumn.showFieldName) }}
              </el-tag>
            </template>
          </table-box-inline-select-column>
          <!-- Cascader组件 -->
          <table-box-inline-cascader-column
            v-if="subColumn.inlineEditWidgetType === SysCustomWidgetType.INLINE_CASCADER"
            :ref="subColumn.columnId"
            :title="subColumn.showName"
            :width="subColumn.columnWidth"
            :field="subColumn.editFieldName"
            :sortable="subColumn.sortable"
            :multiple="
              subColumn.column && subColumn.column.fieldKind === SysOnlineFieldKind.MULTI_SELECT
            "
            :filters="subColumn.filterable ? subColumn[subColumn.showFieldName] : undefined"
            :filter-method="filterMethod"
            :loadDropdownData="row => loadTableColummnDropdownData(row, subColumn)"
            :visible="subColumn.show"
            :fixed="subColumn.fixed === 'none' ? undefined : subColumn.fixed"
            :row-group-node="firstColumnField === subColumn.showFieldName"
            :disabled="onInlineColumnDisabled(subColumn)"
            @change="(val, row) => onInlineColumnValueChange(val, row, subColumn)"
          >
            <template #default="{ row }">
              <span v-if="row.isAggregate && row.groupField != null">
                {{ getObjectValue(row, subColumn.showFieldName, firstColumnField) }}
              </span>
              <span
                v-else-if="subColumn.fieldShowType === 0 || subColumn.fieldShowType == null"
                :class="{ 'cell-click': subColumn.supportCellClick }"
              >
                {{ getObjectValue(row, subColumn.showFieldName) }}
              </span>
              <el-tag
                v-else
                :size="layoutStore.defaultFormItemSize"
                :type="getCellTagType(subColumn, row)"
              >
                {{ getObjectValue(row, subColumn.showFieldName) }}
              </el-tag>
            </template>
          </table-box-inline-cascader-column>
          <!-- 用户选择组件 -->
          <table-box-inline-custom-column
            v-if="subColumn.inlineEditWidgetType === SysCustomWidgetType.UserSelect"
            :ref="subColumn.columnId"
            :key="subColumn.columnId"
            :title="subColumn.showName"
            :width="subColumn.columnWidth"
            :field="subColumn.editFieldName"
            :sortable="subColumn.sortable"
            :filters="
              subColumn.filterable ? tableColumnFilterList[subColumn.showFieldName] : undefined
            "
            :filter-method="filterMethod"
            :editComponent="UserSelect"
            :visible="subColumn.show"
            :fixed="subColumn.fixed === 'none' ? undefined : subColumn.fixed"
            :row-group-node="firstColumnField === subColumn.showFieldName"
            :disabled="onInlineColumnDisabled(subColumn)"
            @change="(val, row) => onInlineColumnValueChange(val, row, subColumn)"
          >
            <template #default="{ row }">
              <span v-if="row.isAggregate && row.groupField != null">
                {{ getObjectValue(row, subColumn.showFieldName, firstColumnField) }}
              </span>
              <span
                v-else-if="subColumn.fieldShowType === 0 || subColumn.fieldShowType == null"
                :class="{ 'cell-click': subColumn.supportCellClick }"
              >
                {{ getObjectValue(row, subColumn.showFieldName) }}
              </span>
              <el-tag
                v-else
                :size="layoutStore.defaultFormItemSize"
                :type="getCellTagType(subColumn, row)"
              >
                {{ getObjectValue(row, subColumn.showFieldName) }}
              </el-tag>
            </template>
          </table-box-inline-custom-column>
          <!-- 部门选择组件 -->
          <table-box-inline-custom-column
            v-if="subColumn.inlineEditWidgetType === SysCustomWidgetType.DeptSelect"
            :ref="subColumn.columnId"
            :key="subColumn.columnId"
            :title="subColumn.showName"
            :width="subColumn.columnWidth"
            :field="subColumn.editFieldName"
            :sortable="subColumn.sortable"
            :filters="
              subColumn.filterable ? tableColumnFilterList[subColumn.showFieldName] : undefined
            "
            :filter-method="filterMethod"
            :editComponent="DeptSelect"
            :visible="subColumn.show"
            :fixed="subColumn.fixed === 'none' ? undefined : subColumn.fixed"
            :row-group-node="firstColumnField === subColumn.showFieldName"
            :disabled="onInlineColumnDisabled(subColumn)"
            @change="(val, row) => onInlineColumnValueChange(val, row, subColumn)"
          >
            <template #default="{ row }">
              <span v-if="row.isAggregate && row.groupField != null">
                {{ getObjectValue(row, subColumn.showFieldName, firstColumnField) }}
              </span>
              <span
                v-else-if="subColumn.fieldShowType === 0 || subColumn.fieldShowType == null"
                :class="{ 'cell-click': subColumn.supportCellClick }"
              >
                {{ getObjectValue(row, subColumn.showFieldName) }}
              </span>
              <el-tag
                v-else
                :size="layoutStore.defaultFormItemSize"
                :type="getCellTagType(subColumn, row)"
              >
                {{ getObjectValue(row, subColumn.showFieldName) }}
              </el-tag>
            </template>
          </table-box-inline-custom-column>
          <!-- 一对一关联选择组件 -->
          <InlineCustomDataSelect
            v-if="subColumn.inlineEditWidgetType === SysCustomWidgetType.DataSelect"
            :ref="subColumn.columnId"
            :key="subColumn.columnId"
            :title="subColumn.showName"
            :width="subColumn.columnWidth"
            :field="subColumn.editFieldName"
            :sortable="subColumn.sortable"
            :filters="
              subColumn.filterable ? tableColumnFilterList[subColumn.showFieldName] : undefined
            "
            :filter-method="filterMethod"
            :relativeTable="subColumn.relativeTable"
            :visible="subColumn.show"
            :fixed="subColumn.fixed === 'none' ? undefined : subColumn.fixed"
            :row-group-node="firstColumnField === subColumn.showFieldName"
            :disabled="onInlineColumnDisabled(subColumn)"
            @change="(val, row) => onInlineColumnValueChange(val, row, subColumn)"
          >
          </InlineCustomDataSelect>
          <!-- 字典选择组件 -->
          <InlineDictSelect
            v-if="subColumn.inlineEditWidgetType === SysCustomWidgetType.DictSelect"
            :ref="subColumn.columnId"
            :key="subColumn.columnId"
            :title="subColumn.showName"
            :width="subColumn.columnWidth"
            :field="subColumn.editFieldName"
            :sortable="subColumn.sortable"
            :widget="subColumn.column"
            :filters="
              subColumn.filterable ? tableColumnFilterList[subColumn.showFieldName] : undefined
            "
            :filter-method="filterMethod"
            :visible="subColumn.show"
            :fixed="subColumn.fixed === 'none' ? undefined : subColumn.fixed"
            :row-group-node="firstColumnField === subColumn.showFieldName"
            :disabled="onInlineColumnDisabled(subColumn)"
            @change="
              (val, row, selectRow, dictData) =>
                onInlineColumnValueChange(val, row, subColumn, selectRow, dictData)
            "
          />
        </template>
        <template v-else>
          <vxe-column
            :title="subColumn.showName"
            :field="subColumn.showFieldName"
            :width="subColumn.columnWidth"
            :filters="
              subColumn.filterable ? tableColumnFilterList[subColumn.showFieldName] : undefined
            "
            :class-name="subColumn.supportCellClick ? 'cell-click' : ''"
            :filter-method="filterMethod"
            :sortable="subColumn.sortable"
            :visible="subColumn.show"
            :fixed="subColumn.fixed === 'none' ? undefined : subColumn.fixed"
            :row-group-node="firstColumnField === subColumn.showFieldName"
            :show-overflow="
              subColumn.textShowType != undefined && subColumn.textShowType !== 0
                ? 'title'
                : undefined
            "
          >
            <template #default="{ row }">
              <span v-if="row.isAggregate && row.groupField != null">
                {{ getObjectValue(row, subColumn.showFieldName, firstColumnField) }}
              </span>
              <el-tag
                v-else-if="subColumn.column && subColumn.column.objectFieldType === 'Boolean'"
                :size="layoutStore.defaultFormItemSize"
                :type="getObjectValue(row, subColumn.showFieldName) ? 'success' : 'danger'"
              >
                {{ getObjectValue(row, subColumn.showFieldName) ? '是' : '否' }}
              </el-tag>
              <upload-file-list
                v-else-if="
                  subColumn.column && subColumn.column.fieldKind === SysOnlineFieldKind.UPLOAD_IMAGE
                "
                :file-list="parseTableUploadData(subColumn, row)"
                type="card"
                direction="horizontal"
                :readonly="true"
              />
              <upload-file-list
                v-else-if="
                  subColumn.column && subColumn.column.fieldKind === SysOnlineFieldKind.UPLOAD
                "
                :file-list="parseTableUploadData(subColumn, row)"
                type="text"
                direction="horizontal"
                :readonly="true"
              />
              <!-- Jie. 20250718 分组列表无法渲染的问题 -->
              <component
                v-else-if="subColumn.needRender"
                :is="() => onCellRender(subColumn, row, firstColumnField)"
              />
              <span v-else-if="subColumn.column && subColumn.column.objectFieldType === 'Date'">
                {{ getDateColumnValue(subColumn, row) }}
              </span>
              <template v-else>
                <span
                  v-if="subColumn.fieldShowType === 0 || subColumn.fieldShowType == null"
                  :class="{ 'cell-click': subColumn.supportCellClick }"
                >
                  {{ getObjectValue(row, subColumn.showFieldName) }}
                </span>
                <el-tag
                  v-else
                  :size="layoutStore.defaultFormItemSize"
                  :type="getCellTagType(subColumn, row)"
                >
                  {{ getObjectValue(row, subColumn.showFieldName) }}
                </el-tag>
              </template>
            </template>
          </vxe-column>
        </template>
      </template>
    </template>
  </vxe-colgroup>
</template>

<script>
// Jie. 20250418 增加render函数
import { h } from 'vue';
import * as ElComp from 'element-plus';
import { SysOnlineFieldKind } from '@/common/staticDict/online';
import { SysCustomWidgetType, OnlineFormEventType } from '@/common/staticDict';
import { findItemFromList, getObjectValue, stringCase, formatDate } from '@/common/utils';
import InlineCustomDataSelect from '@/online/components/OnlineCustomDataSelect/InlineCustomDataSelect.vue';
import InlineDictSelect from '@/online/components/OnlineDictSelect/InlineDictSelect.vue';
import OnlineCustomTableColumnGroup from './OnlineCustomTableColumnGroup.vue';
import { VxeColgroup, VxeColumn } from 'vxe-table';
import { useLayoutStore } from '@/store';

const layoutStore = useLayoutStore();

export default {
  name: 'OnlineCustomTableColumnGroup',
  props: {
    tableColumn: {
      type: Object,
      required: true,
    },
    getActionUrl: {
      type: Function,
    },
    getUploadData: {
      type: Function,
    },
    getUploadLimit: {
      type: Function,
    },
    parseInlineUploadData: {
      type: Function,
    },
    loadTableColummnDropdownData: {
      type: Function,
    },
    onTableDropdownChange: {
      type: Function,
    },
    filterMethod: {
      type: Function,
    },
    firstColumnField: {
      type: String,
    },
    primaryColumnName: {
      type: String,
    },
    table: {
      type: Object,
      required: true,
    },
    inlineEditConfig: {
      type: Object,
      required: true,
    },
  },
  components: {
    OnlineCustomTableColumnGroup,
    InlineCustomDataSelect,
    InlineDictSelect,
    VxeColgroup,
    VxeColumn,
  },
  // Jie. 20250719 注入form
  inject: ['form'],
  data() {
    return {
      layoutStore: layoutStore,
      SysOnlineFieldKind: SysOnlineFieldKind,
      SysCustomWidgetType: SysCustomWidgetType,
    };
  },
  methods: {
    // Jie. 20250418 单元格渲染事件
    onCellRender(tableColumn, row, firstColumnField) {
      if (tableColumn && tableColumn.eventInfo[OnlineFormEventType.CELL_RENDER]) {
        return tableColumn.eventInfo[OnlineFormEventType.CELL_RENDER](
          row,
          this.form().instanceData(),
          h,
          ElComp,
        );
      }
      return getObjectValue(
        this.table.isRowEditing(row) ? this.inlineEditConfig.value.rowCopy : row,
        tableColumn.showFieldName,
        firstColumnField,
      );
    },
    parseTableUploadData(tableColumn, row) {
      let jsonData = getObjectValue(
        this.table.isRowEditing(row) ? this.inlineEditConfig.value.rowCopy : row,
        tableColumn.showFieldName,
      );
      return this.parseInlineUploadData(tableColumn, row, jsonData);
    },
    getObjectValue(row, fieldName, firstColumnField) {
      return getObjectValue(
        this.table.isRowEditing(row) ? this.inlineEditConfig.value.rowCopy : row,
        fieldName,
        firstColumnField,
      );
    },
    getCellTagType(tableColumn, row) {
      if (tableColumn && tableColumn.eventInfo[OnlineFormEventType.CELL_TAG_TYPE]) {
        return tableColumn.eventInfo[OnlineFormEventType.CELL_TAG_TYPE](row);
      }
      return 'primary';
    },
    getDateColumnValue(tableColumn, row) {
      let value = getObjectValue(
        this.table.isRowEditing(row) ? this.inlineEditConfig.value.rowCopy : row,
        tableColumn.showFieldName,
      );
      if (value == null) return '';
      if (tableColumn.column.objectFieldType === 'Date') {
        return formatDate(value, tableColumn.dateType || 'YYYY-MM-DD HH:mm:ss');
      } else {
        return value;
      }
    },
    onInlineColumnValueChange(val, row, tableColumn, selectRow, dictData) {
      if (tableColumn.eventInfo && tableColumn.eventInfo[OnlineFormEventType.INLINE_VALUE_CHANGE]) {
        tableColumn.eventInfo[OnlineFormEventType.INLINE_VALUE_CHANGE](
          val,
          row,
          {
            selectRow,
            dictData,
          },
          this.form().instanceData(),
        );
      }
    },
    onInlineColumnDisabled(tableColumn) {
      if (
        this.inlineEditConfig.value.rowCopy &&
        tableColumn.eventInfo &&
        tableColumn.eventInfo[OnlineFormEventType.INLINE_DISABLED]
      ) {
        return tableColumn.eventInfo[OnlineFormEventType.INLINE_DISABLED](
          this.inlineEditConfig.value.rowCopy,
          this.form().instanceData(),
        );
      }
      return false;
    },
  },
};
</script>
